<template>
  <div class="app-container">
    <h2>Todo List</h2>
    <Header :addTodoItem="addTodoItem" />
    <TodoList :todoList="todoList" />
    <Footer :todoList="todoList" />
  </div>
</template>

<script lang="ts">
// 导入TodoItemModel类
// 导入ts模块不添加ts后缀
import { TodoItemModel } from '@/type-scripts/todo-model';
import Header from '@/components/Header.vue';
import TodoList from '@/components/TodoList.vue';
import Footer from '@/components/Footer.vue';
import { reactive, defineComponent, toRefs, provide, ref } from 'vue';
import Vue from 'vue';

export default defineComponent({
  name: 'App',
  // 组件注册
  components: {
    Header,
    TodoList,
    Footer,
  },

  setup() {
    // 使用响应式数据
    const todoListEntity = reactive({
      todoList: [
        new TodoItemModel(1, '读书', false),
        new TodoItemModel(2, '写字', false),
        new TodoItemModel(3, '看电视', false),
        new TodoItemModel(4, '听音乐', false),
      ],
    });

    // 添加一个新的todo项
    const addTodoItem = (todoItem: TodoItemModel): void => {
      todoListEntity.todoList.unshift(todoItem);
    };

    // 修改制定项状态
    const modifyTodoStatus = (index: number, checked: boolean) => {
      todoListEntity.todoList[index].isComplete = checked;
    };

    // 移除指定Item
    const removeTodoItem = (index: number) => {
      todoListEntity.todoList.splice(index, 1);
    };

    //将方法注入到子组件，将在TodoItem中使用
    provide('modifyTodoStatus', modifyTodoStatus);
    provide('removeTodoItem', removeTodoItem);
    return {
      ...toRefs(todoListEntity),
      addTodoItem,
      modifyTodoStatus,
      removeTodoItem,
    };
  },
});
</script>

<style lang="scss" scoped>
.app-container {
  width: 600px;
  margin: 80px auto;

  h2 {
    text-align: center;
  }
}
</style>
